<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>售后订单</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
    <div class="app-loading" v-if="pageLoading">
        <div class="app-loading__logo">
            <img src="{__IMG__}/logo.png"/>
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{$title}</div>
    </div>
    <el-card class="box-card" v-else>
        <div slot="header" class="clearfix">
            <span>售后订单</span>
        </div>
        <div class="search-box">
            <el-form ref="form" :model="searchForm" label-width="80px">
                <el-form-item label="退款状态" style="margin-bottom: 10px;">
                    <el-button-group>
                        <el-button :class="{'primary': searchForm.status == 0}" size="small" @click="checkStatus(0)">全部</el-button>
                        <el-button :class="{'primary': searchForm.status == 1}" size="small" @click="checkStatus(1)">
                            <el-badge :value="unCheck" class="item" type="danger" v-if="unCheck > 0">待审批</el-badge>
                            <span v-else>待审批</span>
                        </el-button>
                        <el-button :class="{'primary': searchForm.status == 2}" size="small" @click="checkStatus(2)">已通过</el-button>
                        <el-button :class="{'primary': searchForm.status == 3}" size="small" @click="checkStatus(3)">已拒绝</el-button>
                        <el-button :class="{'primary': searchForm.status == 4}" size="small" @click="checkStatus(4)">已取消</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="80px">
                <el-form-item label="订单号">
                    <el-input v-model="searchForm.order_no" placeholder="订单号" style="width: 300px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="退款时间">
                    <el-date-picker
                            size="small"
                            v-model="searchForm.create_time"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
        <el-table
                :data="tableData"
                :row-style="{ height: '57px'}"
                style="width: 100%;font-size: 12px">
            <el-table-column
                    label="订单号"
                    prop="refund_order_no"
                    width="200px">
            </el-table-column>
            <el-table-column
                    label="退款商品"
                    width="400px">
                <template slot-scope="scope">
                    <div v-for="item in scope.row.detail" :key="item.id">
                        <div class="goods-info">
                            <div class="goods-img">
                                <img :src="item.logo" style="height: 36px;width: 36px">
                            </div>
                            <div class="goods-name">
                                {{ item.goods_name }}
                                <div v-if="item.rule != 0">
                                    {{ item.rule.split('※').join(' ') }}
                                </div>
                            </div>
                        </div>
                        <div class="goods-price">
                            ￥{{ item.price }} × {{ item.apply_refund_num }}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="退款人">
                <template slot-scope="scope">
                    <p>{{ scope.row.user_name }}</p>
                    <p>ID: {{ scope.row.user_id }}</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="退款时间"
                    width="160px">
            </el-table-column>
            <el-table-column
                    prop="step_txt"
                    label="退款进度">
            </el-table-column>
            <el-table-column
                    prop="status_txt"
                    label="退款状态">
            </el-table-column>
            <el-table-column
                    prop="apply_refund_reason"
                    label="退款原因">
            </el-table-column>
            <el-table-column
                    label="操作"
                    fixed="right"
                    width="150px">
                <template slot-scope="scope">
                    <el-dropdown @command="handleMore($event, scope.row)">
                        <span class="el-dropdown-link" style="font-size: 12px">
                        更多 <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="detail">订单详情</el-dropdown-item>
                            <el-dropdown-item command="agreeRefundMoney" v-if="(scope.row.refund_type == 1 && scope.row.step == 2 && scope.row.status == 1) ||
                                                (scope.row.refund_type == 2 && scope.row.step == 4 && scope.row.status == 1)">同意退款</el-dropdown-item>
                            <el-dropdown-item command="refuseRefundMoney" v-if="(scope.row.refund_type == 1 && scope.row.step == 2 && scope.row.status == 1) ||
                                                (scope.row.refund_type == 2 && scope.row.step == 4 && scope.row.status == 1)">拒绝退款</el-dropdown-item>
                            <el-dropdown-item command="agreeRefundGoods" v-if="scope.row.refund_type == 2 && scope.row.step == 2 && scope.row.status == 1">同意退货</el-dropdown-item>
                            <el-dropdown-item command="refuseRefundGoods" v-if="scope.row.refund_type == 2 && scope.row.step == 2 && scope.row.status == 1">拒绝退货</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-div" style="margin-top: 20px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="searchForm.limit"
                    @current-change="pageChangeHandle"
                    :total="page.total">
            </el-pagination>
        </div>
    </el-card>

    <el-dialog
            title="退款详情"
            :visible.sync="orderVisible"
            width="60%">
        {include file="/refund/form"}
    </el-dialog>

    <el-dialog
            title="同意退款"
            :visible.sync="refundMoneyVisible"
            width="40%">
        <el-form ref="form" :model="refundMoneyForm" label-width="80px">
            <el-form-item label="订单号">
                <el-input v-model="orderNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="退款金额">
                <el-input v-model="refundMoneyForm.refund_price" type="number"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitAgreeRefundMoney">确定提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            title="拒绝退款"
            :visible.sync="refuseMoneyVisible"
            width="40%">
        <el-form ref="form" :model="refuseRefundMoneyForm" label-width="100px">
            <el-form-item label="拒绝退款原因">
                <el-input v-model="refuseRefundMoneyForm.refund_reason" type="textarea" rows="3"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitRefuseRefundMoney">确定提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                pageLoading: true,
                baseIndex: '/{:config("shop.backend_index")}/',
                searchForm: {
                    status: 0,
                    order_no: '',
                    create_time: '',
                    page: 1,
                    limit: 10
                },
                page: {
                    total: 0
                },
                loading: false,
                tableData: [],
                orderVisible: false,
                refundMoneyVisible: false,
                refuseMoneyVisible: false,
                orderDetail: {
                    imgJson: {},
                    refund: {},
                    info: {},
                    status: {},
                    payWay: {}
                },
                orderNo: '',
                refundMoneyForm: {
                    id: 0,
                    status: 1,
                    refund_price: 0
                },
                refuseRefundMoneyForm: {
                    id: 0,
                    status: 2,
                    refund_reason: ''
                },
                unCheck: 0
            }
        },
        mounted() {
            this.getList()
            this.pageLoading = false
        },
        methods: {
            // 获取列表
            async getList() {
                let res = await request.get(this.baseIndex + "refund/index", this.searchForm)
                this.tableData = res.data.data
                this.page.total = res.data.total
                this.unCheck = res.data.unCheck
            },
            // 选择订单
            checkStatus(status) {
                this.searchForm.status = status
                this.getList()
            },
            // 查询
            search() {
                this.getList()
            },
            pageChangeHandle(page) {
                this.searchForm.page = page
                this.getList()
            },
            // 更多的方法
            handleMore(event, row) {
                if (event == 'detail') {
                    this.orderVisible= true
                    this.getOrderDetail(row)
                } else if (event == 'agreeRefundMoney') {
                    this.refundMoneyVisible = true
                    this.orderNo = row.refund_order_no
                    this.refundMoneyForm.id = row.id
                    this.refundMoneyForm.refund_price = row.refund_price
                } else if (event == 'refuseRefundMoney') {
                    this.refuseRefundMoneyForm.id = row.id
                    this.refuseMoneyVisible = true
                } else if (event == 'agreeRefundGoods') {
                    this.submitAgreeRefundGoods(row.id)
                } else if (event == 'refuseRefundGoods') {
                    this.submitRefuseRefundGoods(row.id)
                }
            },
            // 获取退款详情
            async getOrderDetail(row) {
                let res = await request.get(this.baseIndex + "refund/detail", {id: row.order_id, refund: row.id})
                this.orderDetail = res.data
            },
            // 同意退款
            async submitAgreeRefundMoney() {
                let res = await request.post(this.baseIndex + "refund/checkRefundMoney", this.refundMoneyForm)
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    this.refundMoneyVisible = false
                    this.getList()
                } else {
                    this.$message.error(res.msg)
                }
            },
            // 拒绝退款
            async submitRefuseRefundMoney() {
                let res = await request.post(this.baseIndex + "refund/checkRefundMoney", this.refuseRefundMoneyForm)
                if (res.code == 0) {
                    this.$message.success(res.msg)
                    this.refuseMoneyVisible = false
                    this.getList()
                } else {
                    this.$message.error(res.msg)
                }
            },
            // 同意退货
            submitAgreeRefundGoods(id) {
                this.$confirm('确定同意退货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.post(this.baseIndex + 'refund/checkRefundGoods', {id: id, status: 1})
                    if (res.code == 0) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(() => {});
            },
            // 拒绝退货
            submitRefuseRefundGoods(id) {
                this.$confirm('确定拒绝退货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.post(this.baseIndex + 'refund/checkRefundGoods', {id: id, status: 2})
                    if (res.code == 0) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(() => {});
            }
        },
    })
</script>
<style>
    .primary {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
    }
    .goods-info {
        width: 100%;
        display: flex;
    }
    .goods-info .goods-img {
        height: 36px;
        width: 36px;
        margin-top: 6px;
    }
    .goods-name {
        margin-left: 10px
    }
    .goods-price {
        color: #F56C6C;
        font-weight: 700;
        padding-left: 36px;
        margin-left: 10px
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
</body>
</html>